<template>
	<view >
		<no-data v-if="false" ></no-data>
		<view v-else  class="group-list">
			<!-- elevation 主要解决 nvue 文件中的android 设备的阴影问题 -->
			<view class="group-item" elevation="12px" v-for="(item,index)  in groupList"  :key="index">
				<text class="title">{{item.title}}</text>
				<course-item  v-for="(info,i) in item.list"  :key="i"  :item="info"  ></course-item>
				<view class="price-box space-between center">
					<view >
						<text class="group-price">￥{{item.groupPrice}}</text>
						<text class="total-price">￥{{item.totalPrice}}</text>
					</view>
					<text class="buy" @click="buyGroupHandler(item)">购买套餐</text>
				</view>
			</view>
		</view>
	</view>
	
</template>

<script>
	
	import courseItem from '@/components/common/course-item.vue'
	
	// 套餐的Data数据
	import  groupData  from  '@/mock/courseGroupData.js'
	export  default {
		components:{
			courseItem
		},
		props:{
			groupList:{
				type:Array,
				default:()=> groupData
			}
		},
		methods:{
			buyGroupHandler(item){
				//跳转确认购买页
				this.navTo(`/pages/order/confirm-buy?courseGroup=`+encodeURIComponent(JSON.stringify(item)))
			}
		}
		
		
	}
</script>

<style  lang="scss">
	.group-item{
		margin: 36rpx  30rpx;
		background-color: #FFFFFF;
		border-radius: 20rpx;
		 //是阴影 elevation="12px"熟悉在dom里面给予 解决android问题  
		box-shadow: 2px 0 10px 0 rgba(0,0,0 ,0.1); 
		padding: 0  20rpx;
		
		.title{
			font-size: 30rpx;
			font-weight: 500;
			line-height: 70rpx;
		}
		
		.price-box{
			color: $xg-text-color-red;
			font-size: 30rpx;
			line-height: 80rpx;
			font-weight: bold;
			.group-price{
				font-size: 37rpx;
				margin-right: 10rpx;
				
			}
			.total-price{
				color: #999;
				font-weight: normal;  //取消字体加粗
				text-decoration: line-through;   //去化线
			}
		}
	}
</style>
